<template>
	<view class="cart-item">
		<checkbox-group @change="checkboxChange">
			<checkbox class="checkbox" :checked="item.selected" @change="checkboxChange" />
		</checkbox-group>
		<image class="item-image" :src="item.image" mode="aspectFit" />
		<view class="item-details">
			<view class="item-name" @click="detail(item.product_id)">{{ item.name }}</view>
			<view class="item-price">单价: {{ item.price }}元</view>
			<view class="item-quantity">
				数量:
				<view class="quantity-controls">
					<view class="quantity-decrease" @tap="decreaseQuantity(item.id)">-</view>
					<input class="quantity-num" type="number" :value="item.quantity" disabled />
					<view class="quantity-increase" @tap="increaseQuantity(item.id)">+</view>
				</view>
			</view>
			<view class="remove-button" @tap="removeItem(item.id)">删除</view>
		</view>
	</view>
</template>

<script>
	// 购物车组件
	export default {

		props: {
			item: {
				type: Object,
				required: true,
			},
		},
		methods: {
			async decreaseQuantity(id) {
				try {
					// 显示加载转圈效果，并阻止用户操作
					uni.showLoading({
						title: '加载中...',
						mask: true
					});
					var parms = {}
					parms.cart_id = id
					parms.type = "reduce"
					var response = await this.$http.updateCart(parms)
					if (response.code == 1) {
						this.$emit('quantity-change', this.item, this.item.quantity - 1);
					}

				} catch (error) {
					uni.showToast({
						title: "请求失败",
						icon: 'none',
						duration: 2000
					});
				} finally {
					// 隐藏加载转圈效果
					uni.hideLoading();
				}
			},
			async increaseQuantity(id) {
				try {
					// 显示加载转圈效果，并阻止用户操作
					uni.showLoading({
						title: '加载中...',
						mask: true
					});

					var parms = {}
					parms.cart_id = id
					parms.type = "increate"
					var response = await this.$http.updateCart(parms)
					if (response.code == 1) {
						this.$emit('quantity-change', this.item, this.item.quantity + 1);
					}

				} catch (error) {
					uni.showToast({
						title: "请求失败",
						icon: 'none',
						duration: 2000
					});
				} finally {
					// 隐藏加载转圈效果
					uni.hideLoading();
				}


			},
			async removeItem(id) {
				var parms = {}
				parms.cart_id = id
				var response = await this.$http.removeCartItem(parms)
				if (response.code == 1) {
					uni.showToast({
						title: "删除成功",
						icon: 'success',
						duration: 3000 // 持续时间，单位为毫秒
					})
					this.$emit('remove', this.item);
				}


			},
			checkboxChange(e) {
				// console.log(e.detail)
				// console.log(this.item)
				this.$emit('checkbox-change', this.item);
			},
			detail(id) {
				uni.navigateTo({
					url: "/pages/product/detail?id=" + id
				})
			}
		},
	};
</script>

<style>
	.cart-item {
		display: flex;
		align-items: center;
		padding: 10px;
		border-bottom: 1px solid #ddd;
	}

	.item-image {
		width: 80px;
		height: 80px;
		margin-right: 10px;
	}

	.item-details {
		flex: 1;
	}

	.item-name {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.item-price {
		font-size: 14px;
		color: #888;
	}

	.item-quantity {
		font-size: 14px;
		margin-top: 5px;
	}

	.quantity-controls {
		display: flex;
		align-items: center;
	}

	.quantity-decrease,
	.quantity-increase {
		width: 24px;
		height: 24px;
		text-align: center;
		line-height: 24px;
		font-size: 18px;
		color: #007aff;
		cursor: pointer;
	}

	.quantity-decrease {
		/* margin-right: 5px; */
	}

	.quantity-num {
		/* border: 1px solid red; */
		width: 20px;
		text-align: center;
	}

	.remove-button {
		font-size: 14px;
		color: #007aff;
		margin-top: 10px;
		cursor: pointer;
		width: 50px;
		/* border: 1px solid red; */
	}

	.checkbox {
		/* 添加复选框的样式 */
		/* border: 1px solid red; */
		margin: 10px;
	}
</style>